<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>武汉大学校园3D地图</title>
    <style type="text/css">
      html,
      body,
      #container {
        height: 100%;
        width: 100%;
        margin: 0;
      }
      #map {
        height: 100%;
        width: 100%;
      }
      #reset {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 1;
        transform: scale(1); /* 设置按钮放大倍数 */
        border: none; /* 去掉按钮的边框 */
        padding: 0; /* 去掉按钮的内边距 */
        outline: none; /* 去掉按钮的聚焦状态边框 */
        background-color: transparent; /* 设置按钮背景透明 */
      }
      #select {
        position: absolute;
        top: 30px;
        left: 10px;
        z-index: 1;
      }
      #selection {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1;
      }

      #header {
        font-size: 32px;
        font-weight: bold;
        position: absolute;
        top: 15px;
        left: 50%;
        transform: translate(-50%, -50%); /* 居中对齐 */
        z-index: 9;
        /* 渐变色 */
        background: linear-gradient(
          to right,
          #ff0000,
          #a9c21c,
          #12dc52
        ); /* 设置文字颜色为彩色渐变 */
        -webkit-background-clip: text; /* Webkit浏览器的背景裁剪，实现彩色文字效果 */
        -webkit-text-fill-color: transparent; /* Webkit浏览器的文字填充颜色，设为透明以显示背景渐变 */
      }
      /* select美化 */
      .shortselect {
        background: #fafdfe;
        height: 28px;
        width: 135px;
        line-height: 28px;
        border: 1px solid #9bc0dd;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        text-align: center;
      }

      /* 跳转按钮美化 */
      .circle {
        margin-top: 16px;
        background-color: #f4f1f1;
        color: rgb(5, 5, 5);
        position: relative;
        z-index: 1;
        overflow: hidden;
        border: 1px solid #9bc0dd;
      }

      .circle::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        width: 1rem;
        height: 1rem;
        transform: translate3d(-50%, -50%, 0) scale(0, 0);
        border-radius: 50%;
        background-color: #a6eeac;
        transform-origin: center;
        transition: ease-in-out 0.5s;
      }

      .circle:hover::before {
        transform: translate3d(-50%, -50%, 0) scale(15, 15);
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <button id="reset"><img src="定位.png" /></button>
      <div id="header">
        <a href="https://130.whu.edu.cn/">武汉大学130周年校庆</a>
      </div>
      <button id="select" class="circle">查询</button>
      <select id="selection" class="shortselect">
        <option value="">--请选择地图类型--</option>
        <option value="bus.html">景点图</option>
        <option value="bus.html">校巴图</option>
        <option value="canteen.html">食堂图</option>
      </select>
    </div>

    <script>
      //实现选择地图类型跳转
      // 获取下拉选择和按钮的元素
      var selection = document.getElementById("selection");
      var goButton = document.getElementById("select");

      // 添加按钮点击事件监听器
      goButton.addEventListener("click", function () {
        // 获取选择的选项值
        var selectedOption = selection.value;

        // 跳转到选定的页面
        window.location.href = selectedOption;
      });
    </script>

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=9b551938141cdc8b263341f780dccbcc&plugin=AMap.Geocoder,AMap.DistrictSearch,AMap.MouseTool,AMap.OverView,AMap.Scale"></script>
    <script>
      // 初始化地图对象
      var map = new AMap.Map("map", {
        resizeEnable: true, //是否监控地图容器尺寸变化
        center: [114.364477, 30.534181],
        zoom: 17,
        pitch: 60,
        viewMode: "3D",
        expandZoomRange: true,
        zooms: [3, 20],
      });

      //添加缩放按钮
      AMap.plugin(["AMap.ControlBar"], function () {
        // 添加 3D 罗盘控制
        map.addControl(new AMap.ControlBar());
      });

      // 设置地图语言
      map.setLang("zh_cn");

      // 添加标记点
      var marker_yy = new AMap.Marker({
        position: [114.362633, 30.539047],
        title: "樱园",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_pf = new AMap.Marker({
        position: [114.358218, 30.533276],
        title: "牌坊",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_jwcp = new AMap.Marker({
        position: [114.361534, 30.535393],
        title: "教五草坪",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_lt = new AMap.Marker({
        position: [114.36383, 30.540249],
        title: "老图",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_xzl = new AMap.Marker({
        position: [114.36641, 30.537454],
        title: "行政楼",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_lbm = new AMap.Marker({
        position: [114.371436, 30.543234],
        title: "凌波门",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_jsjxy = new AMap.Marker({
        position: [114.357398, 30.538821],
        title: "计算机学院",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_ljs = new AMap.Marker({
        position: [114.368674, 30.534718],
        title: "珞珈山",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_sq = new AMap.Marker({
        position: [114.3617, 30.538262],
        title: "宋卿体育馆",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_ygl = new AMap.Marker({
        position: [114.360316, 30.542965],
        title: "雅各楼",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_ze = new AMap.Marker({
        position: [114.357376, 30.536866],
        title: "卓尔体育馆",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_xbcbd = new AMap.Marker({
        position: [114.360069, 30.527828],
        title: "信息学部CBD",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      var marker_mycbd = new AMap.Marker({
        position: [114.364607, 30.535402],
        title: "梅园CBD",
        label: {
          content: "",
          offset: new AMap.Pixel(20, 20),
        },
        map: map,
      });

      // 添加信息窗体
      var infoWindow_pf = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6%E7%89%8C%E6%A5%BC/3271452?fr=aladdin" target="_blank">国立武汉大学牌坊</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_pf.on("click", function () {
        infoWindow_pf.open(map, marker_pf.getPosition());
      });

      var infoWindow_yy = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E5%A4%A7%E6%A8%B1%E5%9B%AD/15515912?fr=aladdin" target="_blank">樱园</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_yy.on("click", function () {
        infoWindow_yy.open(map, marker_yy.getPosition());
      });

      var infoWindow_jwcp = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E7%8F%9E%E7%8F%88%E5%B9%BF%E5%9C%BA/3688350?fr=aladdin" target="_blank">教五草坪</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_jwcp.on("click", function () {
        infoWindow_jwcp.open(map, marker_jwcp.getPosition());
      });

      var infoWindow_lt = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6%E8%80%81%E5%9B%BE%E4%B9%A6%E9%A6%86/3272395?fr=aladdin" target="_blank">老图书馆</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_lt.on("click", function () {
        infoWindow_lt.open(map, marker_lt.getPosition());
      });

      var infoWindow_xzl = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6%E8%A1%8C%E6%94%BF%E6%A5%BC/3185162?fr=aladdin" target="_blank">行政楼</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_xzl.on("click", function () {
        infoWindow_xzl.open(map, marker_xzl.getPosition());
      });

      var infoWindow_lbm = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E5%87%8C%E6%B3%A2%E9%97%A8/3673642?fr=aladdin" target="_blank">凌波门</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_lbm.on("click", function () {
        infoWindow_lbm.open(map, marker_lbm.getPosition());
      });

      var infoWindow_jsjxy = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6%E8%AE%A1%E7%AE%97%E6%9C%BA%E5%AD%A6%E9%99%A2/2871238?fr=aladdin" target="_blank">计算机学院</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_jsjxy.on("click", function () {
        infoWindow_jsjxy.open(map, marker_jsjxy.getPosition());
      });

      var infoWindow_ljs = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E7%8F%9E%E7%8F%88%E5%B1%B1" target="_blank">珞珈山</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_ljs.on("click", function () {
        infoWindow_ljs.open(map, marker_ljs.getPosition());
      });

      var infoWindow_sq = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E5%AE%8B%E5%8D%BF%E4%BD%93%E8%82%B2%E9%A6%86/3162999?fr=aladdin" target="_blank">宋卿体育馆</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_sq.on("click", function () {
        infoWindow_sq.open(map, marker_sq.getPosition());
      });

      var infoWindow_ygl = new AMap.InfoWindow({
        content:
          '<div><a href="https://map.baidu.com/poi/%E9%9B%85%E5%90%84%E6%A5%BC/@12731346.135,3552428.65,18.59z?uid=ecefc1201bfe279c29b97ca7&ugc_type=3&ugc_ver=1&device_ratio=2&compat=1&pcevaname=pc4.1&querytype=detailConInfo&da_src=shareurl" target="_blank">雅各楼</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_ygl.on("click", function () {
        infoWindow_ygl.open(map, marker_ygl.getPosition());
      });

      var infoWindow_ze = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6%E5%8D%93%E5%B0%94%E4%BD%93%E8%82%B2%E9%A6%86/22866619?fr=aladdin" target="_blank">卓尔体育馆</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_ze.on("click", function () {
        infoWindow_ze.open(map, marker_ze.getPosition());
      });

      var infoWindow_xbcbd = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6%E4%BF%A1%E6%81%AF%E5%AD%A6%E9%83%A8/2423309?fr=aladdin" target="_blank">信息学部</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_xbcbd.on("click", function () {
        infoWindow_xbcbd.open(map, marker_xbcbd.getPosition());
      });

      var infoWindow_mycbd = new AMap.InfoWindow({
        content:
          '<div><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89%E5%A4%A7%E5%AD%A6%E6%A2%85%E5%9B%AD/3744638?fr=aladdin" target="_blank">梅园</a></div>',
        offset: new AMap.Pixel(0, -30),
        size: new AMap.Size(200, 0),
      });
      marker_mycbd.on("click", function () {
        infoWindow_mycbd.open(map, marker_mycbd.getPosition());
      });

      // 添加重新定位按钮
      var resetBtn = document.getElementById("reset");
      resetBtn.onclick = function () {
        map.setCenter([114.364477, 30.534181]);
        map.setZoom(17);
        map.setPitch(60);
      };
    </script>
  </body>
</html>
